<template>
	<!-- 自定义头部 -->
	<u-navbar title="器具发送" bgColor="#FBFBFF" :autoBack="true" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
		<template #right>
			<view class="u-nav-slot" @click="showEdit = true">
				<image src="/static/icons/more_edit.svg" style="width: 60rpx; height: 60rpx; margin-top: 10rpx"></image>
			</view>
		</template>
	</u-navbar>
	<!-- 页面内容 -->
	<view class="content">
		<!-- 条码录入 -->
		<view class="upload-scan">
			<scan-bar ref="scanBarRef" @code-scanned="getScanResult" :key="datekey"></scan-bar>
		</view>
		<!-- 表单内容 -->
		<view class="baseForm">
			<u--form labelPosition="left" :model="umodel" :rules="rules" ref="uForm" class="form" labelWidth="160rpx" errorType="toast">
				<u-form-item label="货物名称" prop="name">
					<u--input v-model="umodel.name" border="none" clearable placeholder="请填写货物名称" inputAlign="right"></u--input>
				</u-form-item>
				<u-form-item label="货物类型" prop="types" @click="openTypeSelect">
					<u--input v-model="umodel.types" border="none" disabled disabledColor="#ffffff" inputAlign="right" placeholder="请选择性别"></u--input>
					<template #right>
						<u-icon name="arrow-right"></u-icon>
					</template>
				</u-form-item>
				<u-form-item label="时间" prop="time" @click="openTimeSelect">
					<u--input v-model="umodel.time" border="none" inputAlign="right" disabled disabledColor="#ffffff" placeholder="请选择时间"></u--input>
					<template #right>
						<u-icon name="arrow-right"></u-icon>
					</template>
				</u-form-item>
				<u-line></u-line>
				<u-form-item label="发货日期" prop="day" @click="openDaySelect">
					<u--input v-model="umodel.day" border="none" inputAlign="right" disabled disabledColor="#ffffff" placeholder="请选择日期"></u--input>
					<template #right>
						<u-icon name="arrow-right"></u-icon>
					</template>
				</u-form-item>
				<u-form-item label="日期范围" prop="days" @click="openDaysSelect">
					<u--input v-model="umodel.days" border="none" inputAlign="right" disabled disabledColor="#ffffff" placeholder="请选择日期范围"></u--input>
					<template #right>
						<u-icon name="arrow-right"></u-icon>
					</template>
				</u-form-item>
				<u-form-item label="权限" prop="isOpen">
					<u-switch v-model="umodel.isOpen"></u-switch>
				</u-form-item>
				<u-form-item label="计数器" prop="number">
					<u-number-box v-model="umodel.number"></u-number-box>
				</u-form-item>

				<u-line></u-line>
				
				<u-form-item label="多选" prop="checkboxValue1">
					<u-checkbox-group v-model="umodel.checks" placement="column" @change="checkboxChange">
						<u-checkbox
							:customStyle="{ marginBottom: '8px' }"
							v-for="(item, index) in checkboxList"
							:key="index"
							:label="item.label"
							:name="item.value"
							:disabled="item.disabled"
						></u-checkbox>
					</u-checkbox-group>
				</u-form-item>
				<u-form-item label="备注" prop="remarks">
					<u--textarea v-model="umodel.remarks" inputAlign="right" placeholder="请输入备注" height="44px"></u--textarea>
				</u-form-item>
				<u-form-item label="RFID编码" prop="RFID">
					<u-button
						v-if="!umodel.RFID"
						type="success"
						shape="circle"
						icon="checkmark"
						text="开始"
						class="custom-style"
						:loading="startRFIDLoading"
						@click="startRFID"
					></u-button>
					<u-button
						v-else
						plain
						type="success"
						shape="circle"
						icon="checkmark"
						text="已录入"
						class="custom-style"
					></u-button>
				</u-form-item>
			</u--form>
			<!-- <button type="primary" @click="submit" class="submit_btn" :loading="posting">提 交</button> -->
		</view>
	</view>
	<!-- 底部导航 -->
	<uni-goods-nav :options="navOptions" :buttonGroup="buttonGroup" @click="leftButtonClick" @buttonClick="buttonClick"></uni-goods-nav>
	<!-- 弹窗 -->
	<u-action-sheet :show="showType" :actions="actions" title="请选择货物类型" cancel-text="取 消" @close="showType = false" @select="typeSelect"></u-action-sheet>
	<u-calendar :show="showDay" round="20px" @confirm="daySelect" @close="showDay = false"></u-calendar>
	<u-calendar :show="showDays" mode="range" round="20px" @confirm="daysSelect" @close="showDays = false"></u-calendar>
	<u-datetime-picker :show="showTime" mode="datetime" @cancel="showTime = false" @confirm="timeSelect"></u-datetime-picker>
	<u-modal
		:show="showImport"
		ref="uModal"
		content="当前信息未点击确认按钮将无法报错, 请确认是否继续？"
		confirmText="继续导入"
		showCancelButton
		@cancel="showImport = false"
		@confirm="confirmImport"
	></u-modal>
	<u-action-sheet :actions="editList" cancelText="取 消" :show="showEdit" @close="showEdit = false" @select="selectEdit"></u-action-sheet>
</template>

<script lang="ts" setup>
import { nextTick, ref, watch, reactive } from 'vue';
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';
import ScanBar from '@/components/scan-bar/index.vue';
import UniGoodsNav from '@/components/uni-goods-nav.vue';
import { http } from '@/utils/http';
import { getTimes } from '@/utils/common';
import { CommonValue, GoodsNavClick } from '@/types/type';

// 获取安全距离高度
const { safeAreaInsets } = uni.getSystemInfoSync();

// 顶部导航右侧操作
const showEdit = ref(false);
const editList = [
	{ value: 0, name: '删除' },
	{ value: 1, name: '清除RFID' }
];
function selectEdit(e: CommonValue) {
	if (e.value === 0) {
		//删除操作
		resetFields();
	} else if (e.value === 1) {
		// 清除RFID
	}
	showEdit.value = true;
	// uni.showToast({
	// 	icon: 'exception',
	// 	title: `${e.name}成功`
	// });
}
// 底部导航操作
const navOptions = reactive([
	{
		icon: 'list-dot',
		text: '导入',
		info: 9
	},
	{
		icon: 'info-circle',
		text: '异常',
		textColor: 'rgba(238,129,48,0.7)',
		iconColor: 'rgba(238,129,48,0.7)'
	}
]);
const buttonGroup = reactive([
	{
		text: '详情',
		backgroundColor: 'rgb(236,245,255)',
		color: 'rgb(0,118,255)',
		loading: false
	},
	{
		text: '发送',
		backgroundColor: 'rgb(0,118,255)',
		color: '#fff',
		loading: false
	}
]);
function buttonClick(item: GoodsNavClick) {
	if (item.index === 0) {
		// 点击进入详情按钮(携带参数id)
		uni.navigateTo({
			url: '/pages/demo/complex/detail?id=12'
		});
	} else {
		if (!buttonGroup[1].loading) {
			// 点击发送按钮
			submit();
		}
	}
}
function leftButtonClick(item: GoodsNavClick) {
	if (item.index === 0) {
		showImport.value = true;
	} else {
		// 点击异常按钮
		uni.navigateTo({
			url: '/pages/demo/complex/list?id=12'
		});
	}
}

// 导入操作
const showImport = ref(false);
function confirmImport() {
	showImport.value = false;
	uni.showToast({
		title: '导入成功'
	});
}
// 获取扫码结果
function getScanResult(result: any) {
	console.log('扫码结果', result);
}

// 表单数据定义
const umodel = reactive({
	name: '器具名称-89098',
	types: '基本类型',
	day: '',
	days: '',
	startDay: '',
	endDay: '',
	time: '',
	remarks: '',
	checks: ['1', '2'],
	isOpen: true,
	number: 1,
	RFID: false
});

// 表单规则定义
const rules = ref({
	name: [
		{
			type: 'string',
			required: true,
			message: '请填写货物名称',
			trigger: ['blur', 'change']
		},
		{
			type: 'string',
			max: 40,
			message: '货物名称长度不超过40个字符',
			trigger: ['blur', 'change']
		}
	],
	types: {
		type: 'string',
		required: true,
		message: '请选择货物类型',
		trigger: ['blur', 'change']
	},
	days: {
		type: 'string',
		required: true,
		message: '请选择日期范围',
		trigger: ['blur', 'change']
	}
});

// 类型选择
const actions = ref([{ name: '基本类型' }, { name: '类型2' }, { name: '类型3' }]);
const showType = ref(false);
function typeSelect(e: CommonValue) {
	umodel.types = e.name;
	console.log('types', umodel.types)
}
function openTypeSelect() {
	showType.value = true;
	uni.hideKeyboard();
}

// 日期选择
const showDay = ref(false);
function daySelect(e) {
	umodel.day = e[0];
	showDay.value = false;
}
function openDaySelect() {
	showDay.value = true;
	uni.hideKeyboard();
}

// 日期选择范围
const showDays = ref(false);
function daysSelect(e: any[]) {
	umodel.startDay = e[0];
	umodel.endDay = e[e.length - 1];
	umodel.days = `${umodel.startDay} 至 ${umodel.endDay}`;
	showDays.value = false;
}
function openDaysSelect() {
	showDays.value = true;
	uni.hideKeyboard();
}

// 时间选择
const showTime = ref(false);
function timeSelect(e:CommonValue) {
	console.log(e);
	umodel.time = getTimes(e.value);
	showTime.value = false;
}
function openTimeSelect() {
	showTime.value = true;
	uni.hideKeyboard();
}

// 多选
const checkboxList = reactive([
	{
		label: '器材-外包装破损',
		value: '1',
		disabled: false
	},
	{
		label: '器材-外包装进水',
		value: '2',
		disabled: false
	},
	{
		label: '器材-丢失',
		value: '3',
		disabled: true
	}
]);
const checkboxChange = (n: CommonValue) => {
	console.log('change', n);
};

// 开始startRFID录入
const startRFIDLoading = ref(false);
function startRFID() {
	startRFIDLoading.value = true;
	// 发送RFID请求处理, 衔接http请求
	setTimeout(() => {
		startRFIDLoading.value = false;
		umodel.RFID = true;
		uni.showToast({
			title: '录入成功'
		});
	}, 1000);
}

// 校验提交
const uForm = ref();
function submit() {
	console.log('umodel', umodel)
	uForm.value
		.validate()
		.then(() => {
			buttonGroup[1].loading = true;
			uni.showToast({
				title: "校验通过，即将初始化",
				icon: "none"
			})
			console.log('传输数据', umodel);
			// 模拟请求
			setTimeout(() => {
				buttonGroup[1].loading = false;
				resetFields();
			}, 3000);
		})
}

// 重置表单信息 & 光标自动blur
const scanBarRef = ref();
const datekey = ref(new Date());
function resetFields () {
	uForm.value.resetFields();
	// scanBarRef.value.reset();
	datekey.value = new Date();
}
</script>

<style lang="scss" scoped>
.content {
	margin: 45px 0 70px;
	.upload-scan {
		padding: 10px 40rpx;
	}
	.baseForm {
		.form {
			padding: $uni-page-padding;
		}
		.u-form-item {
			min-height: 46px;
		}
		:deep(.uicon-arrow-right) {
			top: 1px;
			margin-left: 3px;
		}
		:deep(.u-form-item__body__right__content__slot) {
			flex-direction: row-reverse;
		}
		:deep(.u-textarea__field) {
			text-align: right;
		}
		.u-textarea {
			border: 1px solid $uni-input-border-color;
			border-radius: 8px;
		}
	}
	.custom-style {
		height: 34px;
		width: 100px;
		margin-right: 0px;
	}
}
</style>
